<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { equipApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import { getPlayEndTime, getDateArray } from '@/utils'
  import Pagination from "@/components/Pagination/index.vue";
  import configForm from './configForm.vue';
  const configFormRef = ref();
  const action = reactive({
    total:0,
    list:[] as any[],
    timeObj:getPlayEndTime(getDateArray('ymd'))
  })
  const listQuery = reactive({
    page: 1,
    limit: 20,
  })
  const handleOpenForm = (row:any ={})=>{
    configFormRef.value.openDialog(row)
  }
  const getList = async()=> {
    const loading = Toastloading()
    const { playTime:startDate='', endTime:endDate='' } = action.timeObj
    const res = await equipApi.change_chat_list({
      startDate,
      endDate,
      ...listQuery
    })
    loading.close()
    const { data=[], total=0 } = res.data
    action.list = data
    action.total = total
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelItem">
        <el-button type="primary" @click="handleOpenForm()">新增</el-button>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column width="80" prop="id" label="ID" />
      <el-table-column label="主播身份">
        <el-table-column min-width="90" prop="mic_all_time" label="上麦时长" />
        <el-table-column min-width="90" prop="min_rich_value" label="最小财富等级值" />
        <el-table-column min-width="90" prop="max_rich_value" label="最大财富等级值" />
        <el-table-column min-width="90" prop="min_charm_value" label="最小魅力值" />
        <el-table-column min-width="90" prop="max_charm_value" label="最大魅力值" />
      </el-table-column>
      <el-table-column label="用户身份">
        <el-table-column min-width="90" prop="min_user_rich_value" label="最小财富值" />
        <el-table-column min-width="90" prop="max_user_rich_value" label="最大财富值" />
        <el-table-column min-width="90" prop="min_user_recharge_value" label="最小充值金额" />
        <el-table-column min-width="90" prop="max_user_recharge_value" label="最大充值金额" />
        <el-table-column min-width="90" prop="after_day" label="注册几天后可看" />
      </el-table-column>
      <el-table-column min-width="90" prop="status" label="启用状态">
        <template #default="scoped">
          <el-tag v-show="scoped.row.status == 1">启用</el-tag>
          <el-tag v-show="scoped.row.status == 2" type="danger">关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column min-width="90" label="操作">
        <template #default="scoped">
          <el-button type="primary" @click="handleOpenForm(scoped.row)" >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <configForm ref="configFormRef" @update-list="getList" />
  </div>
</template>